<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07.属性渲染</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入reactDOM核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、引入babel转换文件-->
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <!--4、创建容器元素-->
    <div id="root"></div>
    <!--5、设置script标签的类型为text/babel-->
    <script type="text/babel">
        //6、创建根元素标签对象
        const root = ReactDOM.createRoot(document.querySelector('#root'));
        //7、创建虚拟DOM元素对象
        //属性渲染目的就是为了能够让数据灵活起来,插值表达式外层一定不要加引号了，
        let url = "http://www.baidu.com";
        let baseUrl = "https://www.baidu.com";
        let imgUrl = "/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
        const vDOM = <div>
            <a href="http://www.baidu.com">百度</a>
            <a href={url}>百度</a>
            <a href="http://www.atguigu.com">尚硅谷</a>
            <hr />
            {
                // <img src={imgUrl} />
            }
            {
                /* <img src={baseUrl + imgUrl} /> */
            }
            <img src={`${baseUrl}/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png`} />

        </div >
        //8、渲染
        root.render(vDOM);
    </script>
</body>

</html>